<style type="text/css">
	.list-gallery li {
		margin:5px;
		padding:5px;
		border-radius:5px;
		-moz-border-radius:5px;		
		float:left;
	}
	.list-gallery li img.img-thumb{
		width:200px;
		height:150px;
	}
</style>
<div class="panel-manage">	
	<div class="navbar navbar-inverse">
		<div class="navbar-inner text-right">			
			<button class="btn btn-primary" id="btn-gallery-add">เพิ่ม</button>
			<button class="btn" id="btn-select-all" value="0"><i class="icon-ok"></i> เลือกทั้งหมด</button>
			<button class="btn btn-danger" id="btn-gallery-remove-select">ลบที่เลือก</button>						
		</div>
	</div>
	<div class="panel-message"></div>
	<div class="alert alert-info" style="margin-top:10px;"><p><i class="icon-info-sign"></i>
		<small>ขนาดความกว้างและยาวที่เหมาะสม <?= $image_config['cafe_img_limit_width'] ?> x <?= $image_config['cafe_img_limit_height'] ?> และขนาดรูปภาพไม่เกิน 
			<?= ($image_config['cafe_img_limit_size'] / 1000); ?>kb สนับสนุนไฟล์รูปภาพนามสกุล 
			<?php print implode(',', array_unique(explode(',', strtolower(implode(',', array_unique($image_config['cafe_img_extensions'])))))); ?>
		</small></p>
	</div>	
	<div>					
		<ul class="thumbnails list-gallery">
			<?php if (count($data) > 0):
					for ($i=0; $i<count($data); $i++): ?>
						<li class="thumbnail">
							<div>
								<input type="checkbox" class="chk-c" id="chk-c" name="chk-c[]" value="<?php print $data[$i]["CAF_IMG_FILENAME"]; ?>" />														
								<span class="btn-gallery-remove-item btn-hover icon-remove" style="float:right;"></span>
							</div>
							<img class="img-thumb" src="<?php print $data[$i]['CAF_IMG_FILENAME']; ?>" />    	
						</li>						
				<?php endfor; ?>							
			<?php endif; ?>				
		</ul>	
	</div>
	<form id="frm-gallery" action="<?php print base_url() . $cafe_name; ?>/backend/gallery/add/" method="post" enctype="multipart/form-data">		
		<input type="file" name="fg" id="f-gallery" accept="image/png,image/jpg" style="visibility:hidden;" />
	</form>
</div>
<script type="text/javascript">
	$(function(){	
		$('#btn-gallery-add').click(function(e){
			e.preventDefault();			
			$('#f-gallery').trigger('click');
			$('#f-gallery').change(function(event){	
				$('#frm-gallery').submit();				
			});
		});

		$('.btn-gallery-remove-item').on('click', function(e){
			e.preventDefault();
			
			var furl =$(this).parent().find('.chk-c').val()
			var farr = furl.split('/');
			
			if (confirm('คุณต้องการลบสินค้านี้ใช่หรือไม่?')){	
				var item = $(this).parents('li');		 			
				
				$.post('<?php print base_url() . $cafe_name . '/backend/gallery/ajax_remove_item'; ?>', { fname	: farr[farr.length-1] }, function(output){
					switch (output.result){
					    case -2: case -1:{
					    	var html = '<div class="alert alert-error">';
							html += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
							html += output.message + '</div>';
							
							$('.panel-message').html(html);
							setTimeout(function(){ window.location.href = output.redirect_url; },2000)
					    }
					    break;
					    default:{				
					    	if (output.result){
								item.fadeOut(1000);  
								html = '<div class="alert alert-success">';															
							} else
								html = '<div class="alert alert-error">';
								
							html += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
							html += output.message + '</div>';
							$('.panel-message').html(html);
					    }
					    break;
					}	
				}, 'json');	
        	}
		});	

		$('#btn-gallery-remove-select').click(function(e){
			e.preventDefault();
			
			if (confirm('ต้องการลบสินค้าที่เลือกใช่หรือไม่?')){
				var flist = new Array();
				var ilist = new Array();
				
				$('.list-gallery li').each(function(){
					var item = $(this).find('.chk-c:checked');
					ilist.push(item.parents('li'));
					
					if (item.val()){
						var itemarr = item.val().split('/');
						flist.push(itemarr[itemarr.length-1]);					
					}				
				});
				
				$.post('<?php print base_url() . $cafe_name . '/backend/gallery/ajax_remove_select'; ?>', { flist : flist }, function(output){
					switch (output.result){
					    case -2: case -1:{					    	
					    	var html = '<div class="alert alert-error">';
							html += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
							html += output.message + '</div>';
							
							$('.panel-message').html(html);
							setTimeout(function(){ window.location.href = output.redirect_url; },2000)
					    }
					    break;
					    default:{
							if (output.result){
								for (i=0; i<ilist.length; i++)
									ilist[i].fadeOut(1000);
								html = '<div class="alert alert-success">';	
							} else
								html = '<div class="alert alert-error">';
								
							html += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
							html += output.message + '</div>';
							$('.panel-message').html(html);
							
							autoclosealert('.alert', 2000);  
					    }
					    break;
					}	
				}, 'json');	
			}
		});

		$('#btn-select-all').click(function(){			
			if ($('.list-gallery li').length > 0){
				var me = $(this);

				if (me.val() == '1'){
	        		me.attr('value', '0');
	        		me.removeClass('active');  
	        		me.find('i').removeClass('icon-remove');
	        		me.find('i').addClass('icon-ok');          	
				}else{
	            	me.attr('value', '1');
	            	me.addClass('active');
	            	me.find('i').removeClass('icon-ok');
	            	me.find('i').addClass('icon-remove');
				}
											
				$('.list-gallery > li').each(function(){
					if (me.val() == '1')
						$(this).find('#chk-c').prop('checked', true);
					else
						$(this).find('#chk-c').prop('checked', false);					
				});				
			}
		});		
	});
</script>